import React from 'react';
import './styles.less';
import { bgColor } from '../../utils';
import { useContext } from '../../context';

export default function DicesPool() {
  const { store } = useContext();
  return (
    <div className="dices-pool">
      <div className="dices-pool-item">
        <div>可用</div>
        <div className="dices-wrap">
          {store.dices.rockPool.map((i: any) => {
            return (
              <div
                key={i.type}
                className={`dice-item ${i.type}-dice`}
                style={{ background: bgColor[i.type] }}
              >
                {' '}
                {i.value}
              </div>
            );
          })}
        </div>
      </div>
      <div className="dices-pool-item">
        <div>已使用</div>
        <div className="dices-wrap">
          {store.dices.chosen.map((i: any) => {
            return (
              <div
                key={i.type}
                className={`dice-item ${i.type}-dice`}
                style={{ background: bgColor[i.type] }}
              >
                {' '}
                {i.value}
              </div>
            );
          })}
        </div>
      </div>
      <div className="dices-pool-item">
        <div>已锁定</div>
        <div className="dices-wrap">
          {store.dices.locked.map((i: any) => {
            return (
              <div
                key={i.type}
                className={`dice-item ${i.type}-dice`}
                style={{ background: bgColor[i.type] }}
              >
                {' '}
                {i.value}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
